<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper-banner" v-if="bannerList.length > 0">
			<u-swiper :list="bannerList" name="img" @click="bannerClick" bg-color="#fff" height="312rpx" border-radius="16rpx"></u-swiper>
		</view>
		
		<!-- 商品分类 -->
		<goods-tab ref="tab" :list="tabList" @tabChange="tabChangeCustom" v-if="tabList.length > 1"></goods-tab>
		
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-wrap" v-if="active === 0 && newGoodsInfo.id && tabList[active].list.length > 0">
				<goods-item :item="newGoodsInfo"></goods-item>
			</view>
			<view class="goods-wrap" v-for="(item, index) in tabList[active].list">
				<goods-item :item="item" :key="item.id" :index="index"></goods-item>
			</view>
			
			<!-- 商品骨架 -->
			<template v-for="i in ['a', 'b', 'c', 'd']">
				<view class="skeleton-wrap"
					v-if="tabList[active].list.length === 0 &&
						!tabList[active].finished &&
						!tabList[active].empty"
				>
					<skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="3" avatarSize="200rpx"></skeleton>
				</view>
			</template>
			
			<template v-for="i in ['a', 'b', 'c', 'd']">
				<view class="skeleton-wrap" v-if="isTabLoading">
					<skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="3" avatarSize="200rpx"></skeleton>
				</view>
			</template>
		</view>
		
		<!-- 加载状态 -->
		<view class="load-status">
			<load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
				:contentText="contentText"></load-more>
			<load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
			<empty v-if="tabList[active].empty" :height="86"></empty>
		</view>
		
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" top="10"></u-back-top>
		
		<!-- 新人专享 -->
		<u-popup class="new-popup" v-model="newVisible" mode="center" negative-top="120">
			<view class="inner">
				<!-- 圣耀光环背景 -->
				<image class="halo" mode="widthFix" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201113/7e4d0300-255b-11eb-9183-d17500d183fe.png"></image>
				<view class="front">
					<view class="img-box">
						<image class="image" :src="newGoodsInfo.pic"></image>
					</view>
					<view class="goods-name">{{ newGoodsInfo.title }}</view>
					<view class="price">
						<view class="group-price">
							<text class="title">拼团价</text>
							<text class="symbol">¥<text class="text">{{ newGoodsInfo.groupPrice }}</text></text>
						</view>
						<view class="end-price">¥{{ newGoodsInfo.price }}</view>
					</view>
					<view class="deserved-money">
						<image class="image" mode="widthFix" src="@/static/images/goods/red_package.png"></image>
						<text class="text">未拼中奖励{{ newGoodsInfo.deservedMoney }}元红包</text>
					</view>
					<view class="go-car" @tap="goCar()">上车拼团</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import GoodsTab from "@/components/GoodsTab";
	import GoodsItem from '@/components/GoodsItem';
	import Empty from "@/components/Empty";
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import loader from '@/utils/mixin/loader';
	 
	export default {
		name: 'index',
		mixins: [loader],
		components: {
			GoodsTab,
			GoodsItem,
			Empty,
			Skeleton,
			LoadMore,
		},
		data() {
			return {
				bannerList: [],
				isSelect: false,
				isTabLoading: true,
				newGoodsInfo: {},
				newVisible: false,
				newVisibleLock: false,
			}
		},
		onLoad(options) {
			if (options.channel) {
				if (uni.getStorageSync('channel') !== options.channel) {
					uni.removeStorageSync('token');
				}
				uni.setStorageSync('channel', options.channel);
			}
			this.initPage();
			
			// 未登陆时必展示新人弹窗
			if (!uni.getStorageSync('token')) {
				this.getNewPersonGoods();
			}
		},
		async onShow() {
			// 已登录时根据新人状态展示
			if (uni.getStorageSync('token')) {
				await this.$store.dispatch('getUserInfo');
				
				// 是否新人引导
				if (this.userInfo.newPerson === 1) {
					this.getNewPersonGoods();
				} else {
					this.newGoodsInfo = {};
				}
			}
			
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_shouye');
			// #endif
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			// 初始化页面
			initPage() {
				// 获取轮播图列表
				this.$service.shopping.banner.list().then(res => {
					this.bannerList = res;
				});
				
				// 获取分类列表
				this.tabList[0].label = '推荐';
				this.tabList[0].id = '';
				this.$service.shopping.classify.list({
					parentId: 0,
				}).then(res => {
					res.forEach(item => {
					    item.label = item.name;
					  	item.loading = false;
					  	item.finished = false;
					  	item.error = false;
					  	item.empty = false;
					  	item.page = 1;
					  	item.list = [];
					});
					
					this.isTabLoading = false;
					
					this.tabList = this.tabList.concat(res);
					
					this.loadMore(this.tabList[0]);
				});
			},
			// 加载前参数处理
			beforeLoader(item) {
				// 根据分类id筛选商品
				this.params.order = 'level';
				this.params.classifyId = item.id;
				
			    this.service = this.$service.shopping.goods.page(this.params);
			    return true;
			},
			// 轮播图点击
			bannerClick(index) {
				if (this.bannerList[index].type === 0) {
					let url = this.bannerList[index].link;
					uni.navigateTo({
						url: '/pages/goods/detail?gid=' + url
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/webView?url=' + this.bannerList[index].link
					})
				}
				
				// #ifdef MP-WEIXIN
				if (index < 4) {
					let event = 'click_banner' + (index + 1);
					uni.reportAnalytics(event);
				}
				// #endif
			},
			// tab切换
			tabChangeCustom(e) {
				this.isSelect = false;
				this.tabChange(e);
			},
			// 获取基础配置 上架状态关闭时开启新人专享
			getNewPersonGoods() {
				this.$service.common.base.settings().then(res => {
					if (res.isShell === 0) {
						this.$service.order.combination.newpersonGoods().then(res => {
							if (res.goodsId) {
								this.newGoodsInfo = res;
								
								if (!this.newVisibleLock) {
									this.newVisibleLock = true;
									this.newVisible = true;
								}
								
								// 后续不再弹出新人弹窗
								// if (!uni.getStorageSync('newVisible')) {
								// 	uni.setStorageSync('newVisible', 'false');
								// 	this.newVisible = true;
								// 	this.isShowNewItem = true;
								// }
							}
						})
					}
				});
			},
			// 新人上车！
			goCar() {
				this.newVisible = false;
				uni.navigateTo({
					url: '/pages/goods/detail?gid=' + this.newGoodsInfo.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		.swiper-banner {
			background: linear-gradient(to bottom, #f8d350 40%, #F6F7FA 80%, #F6F7FA 100%);
			padding: 20rpx;
			/deep/.u-swiper-wrap {
				border-radius: 16rpx;
			}
		}
		.goods-list {
			padding: 0 20rpx;
			z-index: 5;
			width: 100%;
			@include flexBox(flex-start, null, null, wrap);
			.goods-wrap {
				margin-bottom: 20rpx;
				&:last-child {
					margin-bottom: 0
				}
			}
			.skeleton-wrap {
				background: #fff;
				width: 100%;
				margin: 0 auto;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				&:last-child {
					margin-bottom: 0
				}
			}
		}
		
		/deep/.new-popup {
			.u-mode-center-box {
				background: none;
			}
			.inner {
				width: 748rpx;
				height: 1000rpx;
				position: relative;
				.halo {
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.front {
					padding: 194rpx 123rpx 0 123rpx;
					position: relative;
					.img-box {
						width: 502rpx;
						height: 502rpx;
						.image {
							width: 100%;
							height: 100%;
						}
					}
					.goods-name {
						color: #333333;
						font-size: 32rpx;
						font-weight: 600;
						margin-bottom: 4rpx;
						@include ellipsis(1);
					}
					.price {
						color: #9A9A9A;
						margin-bottom: 16rpx;
						@include flexBox(flex-start, flex-end);
						.group-price {
							font-size: 24rpx;
							color: $main-color-text;
							.title {
								border: 1rpx solid $main-color-text;
								padding: 2rpx 6rpx;
								border-radius: 8rpx;
								margin-right: 10rpx;
							}
							.symbol {
								font-size: 28rpx;
								.text {
									font-size: 48rpx;
									margin-right: 16rpx;
								}
							}
						}
						.end-price {
							color: #696A6B;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}
					.deserved-money {
						background: #FFF0F2;
						color: $main-color-text;
						padding: 0 36rpx;
						line-height: 60rpx;
						font-size: 26rpx;
						@include flexBox(flex-start, center);
						.image {
							width: 40rpx;
							margin-right: 16rpx;
						}
					}
					.go-car {
						width: 100%;
						line-height: 72rpx;
						text-align: center;
						background: $main-color;
						color: #333333;
						font-size: 32rpx;
						border-radius: 50rpx;
						margin-top: 16rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
	/deep/.u-tabs {
		position: relative;
		.u-tab-item {
			position: relative;
			z-index: 2;
		}
		.u-tab-bar {
			height: 14rpx!important;
			width: 60rpx!important;
			margin-left: -10rpx;
			bottom: 10rpx;
			z-index: 1;
		}
	}
</style>
